<template>
	<view class="container">
		<view class="bg bg-color-base margin-b20"></view>
		
		<view class="tab vs-row vs-align-center">
			<image class="tab-bg" src="../static/banner-icon.png" mode=""></image>
			
			<view class="vs-row vs-align-center">
				<view class="vs-column vs-align-center margin-r40" @click="cur = 0">
					<text class="font-50 margin-b20" :class="[cur ? 'color-black-3': 'color-base']">登录</text>
					<view class="line bg-color-base" v-if="!cur"></view>
				</view>
				<!-- <view class="vs-column vs-align-center" @click="cur = 1">
					<text class="font-46 margin-b20" :class="[cur ? 'color-base': 'color-black-3']">注册</text>
					<view class="line bg-color-base" v-if="cur"></view>
				</view> -->
			</view>
		</view>
		
		<view class="login margin-b80" v-if="!cur">
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="../static/account.png" mode=""></image>
				<input v-model="loginForm.mobile"  class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号" placeholder-class="input-placeholder"/>
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="../static/password.png" mode=""></image>
				<input v-model="loginForm.code" maxlength="6" class="vs-flex-item color-base font-30" type="number" value="" placeholder="请输入验证码" placeholder-class="input-placeholder"/>
				<text v-if="verifyShow" @click="getVerifyCode" style="color: #1152FC">获取验证码</text>
				<text v-else style="color: #1152FC">{{verifyTip+'秒后重新获取'}}</text>
			<!-- 	<view v-if="verifyShow" class="code" @click="getVerifyCode">获取验证码</view>
				<view v-else class="verify">{{verifyTip+'秒后重新获取'}}</view> -->
			</view>
		</view>
		
		
		<view @click="login" class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20">
			<text  class="color-white font-34">立即登录</text>
		</view>
		<!-- <view style="display: flex;text-align: center;">
			
			<text class="argee">
				<radio color="#3350D9" value="agreementSelected" :checked="agreement" @click="radioClick"></radio>
				我已阅读并同意<text @click="goAgreement">《用户协议》</text>
			</text>
		</view> -->
		<view class="argee">
			<radio color="#1152FC" value="agreementSelected" :checked="agreement" @click="radioClick">
				<text>我已阅读并同意</text>
				<text style="color: #1152FC" @click="goAgreement">《用户协议》</text>
			</radio>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cur: 0,
				loginForm: {
					// mobile: '13426664955',
					// code: 'ABC@123',
					mobile: '',
					code: ''
				},
				verifyShow: true,
				verifyTip: 59,
				authkey: undefined,
				agreement: false,
				id: null,
				unitId: null
			}
		},
		onLoad() {
			this.authkey = uni.getStorageSync('authkey')
		},
		methods: {
			radioClick() {
				this.agreement = !this.agreement;
			},
			goAgreement() {
				uni.navigateTo({
					url: '/ticketSystem/userAgreement/userAgreement'
				})
			},
			// 获取验证码
			getVerifyCode() {
				console.log(this.loginForm)
				if (!this.$funs.isCorrectMobile(this.loginForm.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else {
					this.$http2.post('auth/mobile/getcode', {
						mobile: this.loginForm.mobile
					}).then(res => {
						if(res.code === 10000) {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							})
						}else if(res.code === 50006) {
							uni.showToast({
								title: '操作频繁,请稍后再试',
								icon: 'none'
							})
						}else {
							uni.showToast({
								title: '验证码发送失败,请稍后再试',
								icon: 'none'
							})
						}
						this.timedown(59)
					})
				}
			},
			timedown(num) {
				let that = this;
				if (num == 0) {
					that.verifyShow = true; // 是否显示获取验证码
					that.verifyTip = 59
					return clearTimeout();
				} else {
					that.verifyShow = false; // 是否显示获取验证码
					setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
			// 登录
			login() {
				if (!this.$funs.isCorrectMobile(this.loginForm.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else if (this.loginForm.code.trim() === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else if(!this.agreement) {
					uni.showToast({
						title: '请勾选同意下方的用户协议',
						icon: 'none'
					})
				}else {
					this.verifyCode()
				}
			},
			verifyCode() {
				this.authkey = uni.getStorageSync('authkey')
				this.$http2.post('auth/mobile/verifycode', {
					mobile: this.loginForm.mobile,
					code: this.loginForm.code,
					authkey: this.authkey || 0,
					authType: 3, //处理人员
					groupId: uni.getStorageSync('groupId')
				}).then(res => {
					console.log(res)
					if (res.code == 10000) {
						uni.setStorageSync('login', true)
						// this.id = res.data.WorkerID
						// this.UnitID = res.data.UnitID
						// this.getUserInfo()
						uni.switchTab({
							url: '/pages/index/index'
						})
						// uni.switchTab({
						// 	url: '../index/index'
						// })
					} else {
						uni.showToast({
							title: '验证失败,请稍后重试',
							icon: 'none'
						})
					}
				})
			},
			getUserInfo() {
				this.$http2.post('worksys/worker/info', {
					id: this.id,
					所属单位: this.unitId
				}).then(res => {
					if(res.code === 10000){
						uni.switchTab({
							url: '../index/index'
						})
						// uni.navigateTo({
						// 	url: '../my/my'
						// })
					}
					if (res.code === 50013) {
						uni.showModal({
							title: '提示',
							content: '您还没有注册,请前往注册',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '../register/register'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} 
					 if (res.code === 50014) {
						uni.setStorageSync('userInfo',res.data)
						uni.setStorageSync('projId',res.data.projId)
						uni.showModal({
							title: '提示',
							content: '您的信息正在审核中,请耐心等待',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '../my/my'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}
	
	.bg {
		position: relative;
		width: 750rpx;
		height: 400rpx;
	}
	
	.tab {
		position: absolute;
		top: 250rpx;
		left: 20rpx;
		right: 20rpx;
		height: 150rpx;
		padding: 0 50rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		
		&-bg {
			position: absolute;
			top: -200rpx;
			right: -50rpx;
			width: 440rpx;
			height: 285rpx;
		}
	}
	
	.line {
		width: 46rpx;
		height: 7rpx;
	}
	
	.login, .register {
		padding: 0 60rpx;
	}
	
	.input {
		display: flex;
		width: 630rpx;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: rgba(80, 100, 235, 0.1);
		border-radius: 30px;
		
		&-icon {
			width: 40rpx;
			height: 40rpx;
		}
		
		&-placeholder {
			// color: #1152FC;
			// color: #808080;
			color: #999;
		}
	}
	
	.button {
		width: 630rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 30px;
		text-align: center;
		line-height: 90rpx;
	}
	
	.separator {
		height: 2rpx;
		margin: 0 30rpx;
		background-color: #f5f5f5;
	}
	
	.other {
		&-items {
			padding: 0 200rpx;
		}
		
		&-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.argee {
		// position: absolute;
		// left: 190rpx;
		// top: 910rpx;
		margin-left: 156rpx;
		margin-top: 60rpx;
		color: #BBBBBB;
		font-size: 28rpx;
		// display: flex;
		// radio {
		// 	position: relative;
		// 	top: -4rpx;
		// 	transform:scale(0.9)
		// }
		// text {
		// 	color: #1152FC;
		// }
	}
</style>
